<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="Cha.biaoti"></el-input>
      </el-form-item>
      <el-form-item label="付款日期">
        <el-col :span="18">
          <el-form-item prop="date1">
            <el-input type="date" v-model="Cha.fukuan"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="Cha.zhuangtai" placeholder="状态">
          <el-option label="全部" value="0"></el-option>
          <el-option label="待审批" value="1"></el-option>
          <el-option label="已通过" value="2"></el-option>
          <el-option label="已拒绝" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请人">
        <el-select v-model="Cha.name" placeholder="申请人">
          <el-option label="全部" value=""></el-option>
          <el-option label="康旭" value="康旭"></el-option>
          <el-option label="杨冰磊" value="康旭"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="FuPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Fupidelete()">批量删除</el-button>
    <el-button type="danger" @click="XiaoAdd()">新增</el-button>
    <el-table ref="yingpi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="标题" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.biaoti }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用途描述" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.miaoshu }}</span>
        </template>
      </el-table-column>

      <el-table-column label="付款金额" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.jine }}</span>
        </template>
      </el-table-column>

      <el-table-column label="付款方式" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.fangshi }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付对象" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.duixiang }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开户行" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.kaihu }}</span>
        </template>
      </el-table-column>

      <el-table-column label="银行账号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.zhanghao }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请人" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.fukuan.substring(10, 0)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.beizhu }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            zhuang(scope.row.zhuangtai)
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="FuEdit(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="FuDelete(scope.row.id)"
            >删除</el-button
          >
          <el-button size="mini" type="danger" @click="FuChong(scope.row.id)"
            >重新提交</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="FuPage"
    />
    <!--应收添加-->
    <el-dialog title="提示" :visible.sync="YingAddShow" width="30%">
      <el-form ref="form" :model="XianList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题">
              <el-input v-model="XianList.biaoti"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用途描述">
              <el-input v-model="XianList.miaoshu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="resource">
              <el-radio-group v-model="XianList.fangshi">
                <el-radio label="微信" value="微信"></el-radio>
                <el-radio label="支付宝" value="支付宝"></el-radio>
                <el-radio label="网银" value="网银"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款金额">
              <el-input type="number" v-model="XianList.jine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="支付对象">
              <el-input v-model="XianList.duixiang"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" required>
              <el-col :span="25">
                <el-form-item prop="date1">
                  <el-input v-model="XianList.kaihu"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号">
              <el-input v-model="XianList.zhanghao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="申请人">
              <el-input v-model="XianList.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请日期">
              <el-input type="date" v-model="XianList.fukuan"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="XianList.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="状态">
          <el-select v-model="XianList.zhuangtai">
            <el-option label="待审批" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶证照片">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple
                :on-success="handleAvatarSuccess2"
                name="fileList"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击修改</el-button>

                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不能查过500k
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="FuBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--应收编辑-->
    <el-dialog title="提示" :visible.sync="YingEintShow" width="30%">
      <el-form ref="form" :model="YingTable" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题">
              <el-input v-model="YingTable.biaoti"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用途描述">
              <el-input v-model="YingTable.miaoshu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="resource">
              <el-radio-group v-model="YingTable.fangshi">
                <el-radio label="微信" value="微信"></el-radio>
                <el-radio label="支付宝" value="支付宝"></el-radio>
                <el-radio label="网银" value="网银"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款金额">
              <el-input type="number" v-model="YingTable.jine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="支付对象">
              <el-input v-model="YingTable.duixiang"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" required>
              <el-col :span="25">
                <el-form-item prop="date1">
                  <el-input v-model="YingTable.kaihu"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号">
              <el-input v-model="YingTable.zhanghao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="申请人">
              <el-input v-model="YingTable.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请日期">
              <el-input type="date" v-model="YingTable.fukuan"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="YingTable.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="状态">
          <el-select v-model="YingTable.zhuangtai" placeholder="状态">
            <el-option label="待审批" value="1"></el-option>
            <el-option label="已通过" value="2"></el-option>
            <el-option label="已拒绝" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="驾驶证照片">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                multiple
                :on-success="handleAvatarSuccess2"
                name="fileList"
                :show-file-list="false"
              >
                <el-button size="small" type="primary">点击修改</el-button>

                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不能查过500k
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="FuEintBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  FuPages, //查询
  Fupideletes, //批删
  FuDeletes, //单删
  FuBaos, //添加
  FuEdits, //反填
  FuEintBaos, //保存
} from "@/api/system_base/JiesuanApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
      uploadUrl:
        process.env.VUE_APP_BASE_API +
        "services/app/FileManagerService/FilesUpload",
      imageUrl: "",
      addtuname: "",
      YingEintShow: false,
      YingAddShow: false,
      total: 0,
      tableData: [],
      Xianzhuang: "",
      Cha: {
        biaoti: "",
        zhuangtai: "0",
        riqi: "",
        name: "",
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      XianList: {
        biaoti: "",
        miaoshu: "",
        jine: "",
        fangshi: "",
        duixiang: "",
        kaihu: "",
        zhanghao: "",
        name: "",
        fukuan: "",
        beizhu: "",
        zhuangtai: "1",
        piaoju: "",
      },
      YingTable: {
        biaoti: "",
        miaoshu: "",
        jine: "",
        fangshi: "",
        duixiang: "",
        kaihu: "",
        zhanghao: "",
        name: "",
        fukuan: "",
        beizhu: "",
        zhuangtai: "",
        piaoju: "",
      },
      cc: {
        biaoti: "",
        miaoshu: "",
        jine: "",
        fangshi: "",
        duixiang: "",
        kaihu: "",
        zhanghao: "",
        name: "",
        fukuan: "",
        beizhu: "",
        zhuangtai: "",
        piaoju: "",
      },
    };
  },
  created() {
    this.FuPage();
  },
  methods: {
    //文件上传
    handleAvatarSuccess2(res, files, fileList) {
      // res.imagerUrl="https://localhost:44311/"+
      res.result.some((f, i) => {
        var that = this;
        that.addtuname = f.fileNewName;
        this.imagerUrl = "https://localhost:44311/" + f.fileNewName;
      });
    },

    //重新提交
    FuChong(id) {
      var aa = id;
      FuEdits(aa).then((r) => {
        var that = this;
        that.cc = that.YingTable = r.result;
        if (this.cc.zhuangtai != 3) {
          this.$message("待审核或已通过无需重复提交，请耐心等待");
          return;
        } else {
          this.cc.zhuangtai = 1;
        }

        FuEintBaos(this.cc).then((r) => {
          this.$message("重新提交成功");
          this.FuPage();
        });
      });
    },
    //状态显示
    zhuang(val) {
      return val == 1
        ? "待审核"
        : val == 2
        ? "已通过"
        : val == 3
        ? "已拒绝"
        : "";
    },
    //修改保存
    FuEintBao() {
      var aa = this.YingTable;
      aa.piaoju = this.addtuname;
      if (aa.biaoti == "") {
        this.$message("标题不能空");
        return;
      }

      if (aa.miaoshu == "") {
        this.$message("描述不能空");
        return;
      }
      if (this.aa.jine == "" || aa.jine <= 0) {
        this.$message("金额不能空或者数值范围不正确");
        return;
      }

      if (aa.fangshi == "") {
        this.$message("付款方式不能空");
        return;
      }

      if (aa.duixiang == "") {
        this.$message("支付对象不能空");
        return;
      }

      if (aa.kaihu == "") {
        this.$message("开户行不能空");
        return;
      }

      if (aa.zhanghao == "") {
        this.$message("银行账户不能空");
        return;
      }

      if (aa.name == "") {
        this.$message("申请人不能空");
        return;
      }

      if (aa.fukuan == "") {
        this.$message("申请日期不能空");
        return;
      }

      if (aa.beizhu == "") {
        this.$message("备注不能空");
        return;
      }
      if (aa.zhuangtai <= 0) {
        this.$message("请选择状态");
        return;
      }
      if (aa.piaoju == "") {
        this.$message("请上传票据图片");
        return;
      }

      FuEintBaos(aa).then((r) => {
        this.$message("修改成功");
        this.YingEintShow = false;
        this.FuPage();
      });
    },
    //反填
    FuEdit(id) {
      this.YingEintShow = true;
      FuEdits(id).then((r) => {
        var aa = r.result;
        this.YingTable = {};
        this.YingTable = aa;
        var that = this;
        that.YingTable.fukuan = this.YingTable.fukuan.substring(10, 0);
      });
    },
    //添加保存
    FuBao() {
     
      this.XianList.piaoju=this.addtuname;
      console.log("aaaa",this.XianList)
     // aa.piaoju = this.addtuname;
       if (this.XianList.biaoti == "") {
         this.$message("标题不能空");
       return;
     }

      if (this.XianList.miaoshu == "") {
        this.$message("描述不能空");
        return;
      }
      if (this.XianList.jine == "" || this.XianList.jine <= 0) {
        this.$message("金额不能空或者数值范围不正确");
        return;
      }

      if (this.XianList.fangshi == "") {
        this.$message("付款方式不能空");
        return;
      }

      if (this.XianList.duixiang == "") {
        this.$message("支付对象不能空");
        return;
      }

      if (this.XianList.kaihu == "") {
        this.$message("开户行不能空");
        return;
      }

      if (this.XianList.zhanghao == "") {
        this.$message("银行账户不能空");
        return;
      }

      if (this.XianList.name == "") {
        this.$message("申请人不能空");
        return;
      }

      if (this.XianList.fukuan == "") {
        this.$message("申请日期不能空");
        return;
      }

      if (this.XianList.beizhu == "") {
        this.$message("备注不能空");
        return;
      }
      if (this.XianList.zhuangtai <= 0) {
        this.$message("请选择状态");
        return;
      }
      if (this.XianList.piaoju == "") {
        this.$message("请上传票据图片");
        return;
      }

      FuBaos(this.XianList).then((r) => {
        this.$message("添加成功");
        this.YingAddShow = false;
        this.FuPage();
      });
    },
    XiaoAdd() {
      //this.XianList = {};
      this.YingAddShow = true;
    },
    //单删
    FuDelete(id) {
      if (confirm("确认要删除吗")) {
        FuDeletes(id).then((r) => {
          this.$message("删除成功");
          this.FuPage();
        });
      }
    },
    //批量删除
    Fupidelete() {
      var arrid = [];
      var id = this.$refs.yingpi.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Fupideletes(r).then((r) => {});
          this.$message("批删成功");
          this.FuPage();
        });
      }
    },

    //查询
    FuPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      FuPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
          /*  that.tableData.forEach((r) => {
            console.log(r);
            if (r.zhuangtai == 1) {
              that.Xianzhuang = "待审批";
            } else if (r.zhuangtai == 2) {
              that.Xianzhuang = "已通过";
            } else {
              that.Xianzhuang = "已拒绝";
            }
          }); */
        }
      });
    },
    ChaFuPage() {
      this.Cha.page = 1;
      this.FuPage();
    },
  },
};
</script>